<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="__JS__/jquery-1.8.3.js"></script>
</head>
<body>
<h1>学生修改</h1>
<!-- 有图片文件使用 enctype 复合型表单数据（既有文本数据又有二进制数据） -->
<form action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="__token__" value="<{:token()}>">
    姓名：<input type="text" name="xm" value="<{$list['xm']}>"> <br>
    头像：<input type="file" name="img" id="F" value="">
    <img width="80" height="80" src="/static/<{$list['headimg']}>" alt="">
    <input type="hidden" name="headimg" value="">
    <br>
    性别：
    <input type='radio' name='sex' value="男" <{$list['sex']=='男'?'checked':''}>> 男
    <input type='radio' name='sex' value="女" <{$list['sex']==='女'?'checked':''}>> 女 <br>
    年龄：
    <input type="number" name="age" value="<{$list['age']}>"> <br>
    所在系：
    <select name="szx" id="szx">
        {volist name='szx_list' id='v'}
<!--    需要增加三目运算判断 学生表的所在系是否在所在系表里的id数组内，是则返回此id选择，否则为空    -->
        <option value="<{$v.id}>" <{$list['szx']==$v.id?'selected':''}>> <{$v.szx}> </option>
        {/volist}
    </select> <br>
    <button>修改</button>
</form>
<script>
    $('#F').change(function () {
        // this：在js中，this用以指代当前对象，但是this随着程序进行，所处环境不同，也是会一直变化的
        // that: 单纯只是一个变量名
        // this会变，我们不想让他变怎么办？答：var that=this 将this指向that，这是var that = this 的核心思想
        var that = $(this);
        // this.files 是文件上传信息
        console.log(this.files[0])
        if (!this.files[0]) {   // 当用户什么都没选的时候 停止当前操作
            // 显示原图
            that.next().prop("src", "__STR__/<{$list['headimg']}>");  // show()可以将img标签变为显示状态
            that.next().next().val("<{$list['headimg']}>")
            return false;
        }
        // 当用户选择了文件
        // 通过模拟表单的方式，将 文件数据流 存放在模拟的表单中，再提交给服务器
        // 1.new FormData 创建表单对象
        var fd = new FormData;
        // 2.设置文件对象命名和文件名
        fd.append("img", this.files[0]);    // 文件对象命名
        fd.append("name", "用户个人头像");    // 文件命名
        // 3.执行ajax：保存文件逻辑
        $.ajax({
            url: "<{:url('upload/ajax_upload2')}>",
            type: 'post',    // 请求方式
            dataType: 'json',    // 服务端返回的数据类型
            data: fd,    // 表单对象
            success: function (data) {    // 请求成功的返回函数    data指文件上传成功控制器返回的json格式数据
                if (data.error == 0) {
                    // that.next 意思是 input标签下一个标签img标签语句
                    // prop() 方法设置或返回被选元素的属性和值      data.path指定接收到控制器返回的json数据中键（path）的值（存储路径）
                    // alert('__STR__/' + data.path)
                    that.next().show().prop("src", "__TEMP__/" + data.path)  // show()可以将img标签变为显示状态
                    that.next().next().val(data.path)   // 将服务端返回的路径存储至隐藏框中
                } else {
                    // 显示原图
                    that.next().prop("src", "__STR__/<{$list['headimg']}>");  // show()可以将img标签变为显示状态
                    that.next().next().val("<{$list['headimg']}>")
                    alert(data.msg)
                }
            },
            processData: false, // 数据序列化，关闭防止数据流被排序损坏
            contentType: false, // 头类型数据，默认是字符串数据，但提交的是文件是数据流
        })
    })
</script>
</body>
</html>